<!--
    A hand of playing cards
-->
<link rel="import" href="card-element.html">
<polymer-element name="card-collection" constructor="CardCollection" attributes="cards presentation fandegrees stackspacing originx originy">
  <template>
  <style>
    @host {
        * {
            display:block;
        }
    }
    /* this is the future syntax to use */
    /*:host.fan^::content card-card*/
    content.fan::-webkit-distributed(card-card)
    {
          display:block;
          position:absolute !important;
    }
    #cardsElement {
        display:block;
        position:relative;
    }
  </style>
    <content class="{{presentation}}"></content>
  </template>
  <script>
        Polymer('card-collection', {
            cards:[],
            presentation:'horizontal',
            vertical: true,
            fandegrees: 0,
            stackspacing: 0,
            originx: 50,
            originy: 50,
            created: function() {
                var childCards = this.querySelectorAll('card-card');
                this.cards = Array.prototype.slice.call(childCards, 0);
            },
            xcreated: function() {
                var childCards = this.querySelectorAll('card-card');
                var children = [];
                Array.prototype.map.call(childCards, function(child) {
                    children.push(child);
                    child.parentNode.removeChild(child);
                });
                this.cards = children;
            },
            fandegreesChanged: function() {
                this.presentationChanged();
            },
            cardsChanged: function() {
                this.presentationChanged();
            },
            stackspacingChanged: function() {
                this.useStackSpacing = !!this.stackspacing;
                this.presentationChanged();
            },
            presentationChanged: function() {
                this.asyncMethod(function() {                        
                var cards = Array.prototype.slice.call(this.querySelectorAll('card-card'), 0);
                if (this.presentation == 'fan') {
                    // TODO(doughtie): should be able to grab the model value change from sliders and do the number
                    // conversion there.
                    var angleInc = this.fandegrees ? Number(this.fandegrees) : 180 / cards.length;
                    var angle = (cards.length / 2) * -angleInc;
                    cards.forEach(function(card) {
                        card.style.webkitTransform = 'rotateZ(' + angle + 'deg)';
                        angle += angleInc;
                    });
                } else {
                    cards.forEach(function(card) {
                        if (this.presentation == 'horizontal') {
                            card.style.marginRight = this.stackspacing;
                            card.style.display = 'inline-block';
                        } else if (this.presentation == 'vertical') {
                            card.style.marginBottom = this.stackspacing;
                            card.style.display = 'block';
                        }
                        delete card.style.webkitTransform;
                    }.bind(this));
                }
                });              
            },
            xpresentationChanged: function() {
                this.asyncMethod(function() {                        
                var cards = Array.prototype.slice.call(this.webkitShadowRoot.querySelectorAll('card-card'), 0);
                if (this.presentation == 'fan') {
                    // TODO(doughtie): should be able to grab the model value change from sliders and do the number
                    // conversion there.
                    var angleInc = this.fandegrees ? Number(this.fandegrees) : 180 / cards.length;
                    var angle = (cards.length / 2) * -angleInc;
                    cards.forEach(function(card) {
                        card.style.webkitTransform = 'rotateZ(' + angle + 'deg)';
                        angle += angleInc;
                    });
                } else {
                    cards.forEach(function(card) {
                        if (this.presentation == 'horizontal') {
                            card.style.marginRight = this.stackspacing;
                            card.style.display = 'inline-block';
                        } else if (this.presentation == 'vertical') {
                            card.style.marginBottom = this.stackspacing;
                            card.style.display = 'block';
                        }
                        delete card.style.webkitTransform;
                    }.bind(this));
                }
                });
            }
        });
</script>
</polymer-element>
